<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { getArticleByUserId,getArticleList } from "@/api/article.js";
import { getUserInfo } from "@/api/user.js";
import TagItem from "@/components/TagItem.vue";
import { useStore } from "vuex";
const store = useStore();
const articleList = ref([]);
const statusObj = ref({
  color: "",
  text: "",
});
onMounted(() => {
  getArticleListChoice();
  // queryUserInfo();
});
let activeMode = ref("0");
const userId = computed(() => {
  return store.state.user.userInfo.id;
});

const tagEnumList = computed(() => {
  return store.state.tagEnumTypeList;
});

const cateEnumTypeList = computed(() => {
  return store.state.cateEnumTypeList;
});

const userInfo = computed(() => {
  return store.state.user.userInfo;
});

const getArticleListChoice = async () => {
  if (activeMode.value === "0") {
    const res = await getArticleByUserId({ userId: userId.value });
    articleList.value = res.data;
    console.log("res", res, userId.value);
  } else if (activeMode.value === "1") {
    const res = await getArticleList({collectIds:userId.value});
    articleList.value = res.data;
    console.log("res", res, userId.value);
  }
};

const queryUserInfo = async () => {
  // store.dispatch("user/getUserInfo");
};

const handleTagEnumType = (id) => {
  let item = tagEnumList.value.find((item) => item.enumCode == id);
  return item ? item.enumText : "";
};
const handleCateEnumType = (id) => {
  let item = cateEnumTypeList.value.find((item) => item.enumCode == id);
  return item ? item.enumText : "";
};

const handleChangeMode = (value) => {
  console.log("mode", value);
  activeMode.value = value;
  getArticleListChoice();
};

const handleStatus = (status) => {
  switch (status) {
    case -1:
      statusObj.value = {
        color: "#909399",
        text: "已下架",
      };
      break;
    case 0:
      statusObj.value = {
        color: "#909399",
        text: "待审核",
      };
      break;
    case 1:
      statusObj.value = {
        color: "#67c23a",
        text: "已发布",
      };
      break;
    case 2:
      statusObj.value = {
        color: "#e6a23c",
        text: "草稿",
      };
      break;
  }
  return statusObj.value;
};


const collectNum = computed(()=>{
  let num = 0;
  articleList.value.forEach((item=>{
 
    if(item.collectIds) {
      console.log(item,"????")
      let ids  = item.collectIds.split(',');
      let idsItem = ids.find(item=>item ==userId.value );
      console.log(idsItem,"ids")

      if(idsItem) {
        num++;
      }
    }
  }))
  console.log(num,"数量")
  return num;
})

import ErrorImg from "@/assets/images/error.gif";
</script>

<template>
  <div class="main">
    <div class="user-info">
      <div class="bg">
        <div class="top">
          <div class="item">
            <div>3</div>
            <div>文章</div>
          </div>
          <div class="item">
            <div>{{ collectNum }}</div>
            <div>收藏</div>
          </div>
          <div class="item">
            <div>1</div>
            <div>关注</div>
          </div>
          <div class="item">
            <div>0</div>
            <div>赞</div>
          </div>
        </div>
        <img src="@/assets/images/banner1.png" alt="" />
      </div>
      <div class="info">
        <div class="avatar">
          <img v-lazy="userInfo.avatar" alt="" />
        </div>
        <div class="summary">
          <div class="name">昵称：{{ userInfo.nickname||userInfo.username }}</div>
          <div class="user-summary">个人简介:{{ userInfo.intro || "--" }}</div>
        </div>
      </div>
    </div>
    <div class="content">
      <el-tabs
        :model-value="activeMode"
        class="demo-tabs"
        @tab-change="handleChangeMode"
      >
        <el-tab-pane name="0">
          <template #label>
            <el-icon><Document /></el-icon>文章
          </template>
        </el-tab-pane>
        <el-tab-pane name="1">
          <template #label>
            <el-icon><Star /></el-icon>
            收藏</template
          >
        </el-tab-pane>
      </el-tabs>
      <div class="articles">
        <div class="article">
          <div
            class="item"
            v-for="item in articleList"
            v-if="articleList.length > 0"
            :key="item.id"
          >
            <div class="pic">
              <img v-lazy="item.titleImg" alt="" />
            </div>
            <div class="item-right">
              <div class="title">
                <div class="title">{{ item.title }}</div>
                <div class="summary">{{ item.summary }}</div>
              </div>
              <div class="bottom">
                <div class="tag-part">
                  <el-tag
                    type="success"
                    v-if="handleCateEnumType(item.typeId)"
                    >{{ handleCateEnumType(item.typeId) }}</el-tag
                  >
                  <template v-if="item.tagsId&&item.tagsId.split(',').length>0">
                    <el-tag  v-for="tag in item.tagsId.split(',')" v-show="handleTagEnumType(tag)">{{ handleTagEnumType(tag) }}</el-tag>
                  </template>
               
                </div>
                <div class="user">
                  <div class="userinfo">
                    <el-icon><User /></el-icon
                    ><span>{{ userInfo.nickname }}</span>
                  </div>
                  <div class="time">{{ item.updateTime }}</div>
                </div>
              </div>
            </div>
            <div
              class="status"
              :style="{ background: handleStatus(item.status).color }"
            >
              {{ handleStatus(item.status).text }}
            </div>
          </div>
        </div>
        <div class="collect"></div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
:deep .el-tabs__item:hover {
  color: $strong;
}
:deep .el-tabs__item.is-active {
  color: $strong;
}
:deep .el-tabs__active-bar {
  background-color: $strong;
}
.el-icon {
  margin-right: 5px;
}
.main {
  width: 70%;
  margin: 0 auto;
  .user-info {
    margin-top: 20px;
    background-color: #fff;
    .bg {
      position: relative;
      height: 400px;
      img {
        width: 100%;
        height: 400px;
        object-fit: cover;
      }
    }
    .top {
      background: linear-gradient(
        90deg,
        rgba(220, 233, 242, 0.5),
        hsla(0, 0%, 100%, 0.5),
        rgba(220, 233, 242, 0.4)
      );
      position: absolute;
      top: 0;
      left: 0;
      z-index: 9;
      height: 40px;
      width: 100%;
      display: flex;
      justify-content: space-evenly;
      .item {
        width: 20%;
        text-align: center;
      }
    }

    .info {
      height: 80px;
      position: relative;
      background-color: #fff;

      .avatar {
        background-color: #fff;
        border-radius: 5px;
        margin-left: 50px;
        position: absolute;
        top: -80px;
        width: 150px;
        height: 150px;
        padding: 5px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .summary {
        margin-left: 250px;
        .name {
          margin-top: 10px;
          margin-bottom: 10px;
        }
      }
    }
  }
  .content {
    margin-top: 10px;
  }
  .article {
    flex-wrap: wrap;
    display: flex;
    .item {
      overflow: hidden;
      position: relative;
      padding: 10px;
      margin: 0 10px 10px;
      width: 45%;
      display: flex;
      background-color: #fff;

      .status {
        background-color: rgb(144, 147, 153);
        padding: 2px 3px;
        width: 100px;
        position: absolute;
        right: -23px;
        top: 12px;
        opacity: 0.8;
        transform: rotate(45deg);
        color: #fff;
        text-align: center;
      }
      .pic {
        width: 160px;
        height: 150px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .item-right {
        margin-left: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .title {
          .summary {
            min-height: 60px;
            margin: 5px 0;
          }
        }
        .bottom {
          .el-tag {
            margin-right: 10px;
          }
          .user {
            display: flex;
            justify-content: space-evenly;
            .userinfo {
              display: flex;
              align-items: center;
              span {
                color: $strong;
              }
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1000px) {
  .main {
    width: 100%;
    padding: 0 10px;
    .user-info .bg {
      height: 200px;
      img {
        height: 100%;
      }
    }
    .pic {
      display: none;
    }
  }
}
</style>
